import { Tabs } from "antd";
import React from "react";
import HotConfiguration from "./hotSpots";
import QuickEntry from "./quickEntry";
import BottomLabel from "./bottomLabel";
import WelcomeSetting from "./welcomeSetting";
import AppearanceSettings from "./appearanceSettings/index";
import CommonProblem from "./commonProblem";
import styles from "./index.less";
import { formatMessage } from 'umi-plugin-react/locale';
class InlineSetting extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      activeKey: '1'
    }
  }

  changeTab = activeKey => {
    this.setState({ activeKey })
  }

  render() {
    const { activeKey } = this.state;
    const { robotId, applicationId, channel, isllmCustom, loginType } = this.props;

    return (
      <div className={styles.knowledge_configuration}>
        <Tabs activeKey={activeKey} onChange={this.changeTab} className="inLineSettingTab">
          <Tabs.TabPane tab={formatMessage({ id: 'inlineSetting.appearanceSetting' })} key="1">
            {
              activeKey == 1 ? (
                <AppearanceSettings
                  applicationId={applicationId}
                  isllmCustom={isllmCustom}
                  onRef={(ref) => (this.AppearanceSettings = ref)}
                  channel={channel}
                  loginType={loginType}
                />
              ) : ''
            }
          </Tabs.TabPane>
          <Tabs.TabPane tab={formatMessage({ id: 'inlineSetting.welcomeMessage' })} key="2">
            {
              activeKey == 2 ? (
                <WelcomeSetting applicationId={applicationId} />
              ) : ''
            }
          </Tabs.TabPane>
          <Tabs.TabPane tab={formatMessage({ id: 'inlineSetting.hotIssues' })} key="3">
            {
              activeKey == 3 ? (
                <HotConfiguration applicationId={applicationId} />
              ) : ''
            }
          </Tabs.TabPane>
          <Tabs.TabPane tab={formatMessage({ id: 'inlineSetting.quickEntry' })} key="4">
            {
              activeKey == 4 ? (
                <QuickEntry applicationId={applicationId} />
              ) : ''
            }
          </Tabs.TabPane>
          <Tabs.TabPane tab={formatMessage({ id: 'inlineSetting.bottomLabel' })} key="5">
            {
              activeKey == 5 ? (
                <BottomLabel applicationId={applicationId} />
              ) : ''
            }
          </Tabs.TabPane>
          <Tabs.TabPane tab={formatMessage({ id: 'inlineSetting.commonQuestions' })} key="6">
            {
              activeKey == 6 ? (
                <CommonProblem applicationId={applicationId} />
              ) : ''
            }
          </Tabs.TabPane>
        </Tabs>
      </div>
    )
  }
}
export default InlineSetting